<template>
	<div style="">
		<transition>
			<router-view></router-view>
		</transition>
		<!-- 底部 -->
		<div style="height: 55px;"></div>
		<mt-tabbar v-model="selected" :fixed="true">
			<mt-tab-item id="1">
				<img v-show="selected == 1" slot="icon" src="../../assets/icon/tab-icon/home-no.png">
				<img v-show="selected != 1" slot="icon" src="../../assets/icon/tab-icon/home-select.png">
				<span>首页</span>
			</mt-tab-item>
			<mt-tab-item id="2">
				<img v-show="selected == 2" slot="icon" src="../../assets/icon/tab-icon/gouwuche-select.png">
				<img v-show="selected != 2" slot="icon" src="../../assets/icon/tab-icon/gouwuche-no.png">
				<span>购物车</span>
			</mt-tab-item>
			<mt-tab-item id="3">
				<img v-show="selected == 3" slot="icon" src="../../assets/icon/tab-icon/my-select.png">
				<img v-show="selected != 3" slot="icon" src="../../assets/icon/tab-icon/my-no.png">
				<span>我的</span>
			</mt-tab-item>
		</mt-tabbar>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				selected: '1'
			}
		},
		methods: {
			
		},
		watch: {
			selected (newVal) {
				switch (parseInt(newVal)) {
					case 1:
						this.$router.push({
							name: 'home_index'
						})
						break;
					case 2:
						this.$router.push({
							name: 'shop_index'
						})
						break;
					case 3:
					this.$router.push({
						name: 'my_index'
					})
						break;
				}
			}
		},
		created() {
			this.$router.push({
				name: 'home_index'
			})
		}
	}
</script>

<style scoped="scoped" lang="less">
	.mint-tabbar {
		background: #fff;
		box-shadow: 0 -2px 4px 0 rgba(0,0,0,0.03);
	}
	.v-enter{
		opacity: 0;
		transform: translateX(100%);
	}
	.v-leave-to{
		opacity: 0;
		transform: translateX(-100%);
		position: absolute;
	}
	.v-enter-active,.v-leave-active{
		transition: all .3s ease;
	}
</style>
